<template>
  <a-card :bordered="false">
    <a-modal
      title="新增菜单"
      :width="600"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-form-item label="上级菜单">
            <a-tree-select
              style="width: 100%"
              v-decorator="['parentId', { initialValue: mdl.parentId, rules:[{required: true, message: '上级菜单不能为空'}]}]"
              :treeData="treeData"
              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择上级菜单"
              allowClear
              treeDefaultExpandAll>
            </a-tree-select>
          </a-form-item>
          <a-form-item label="菜单名称">
            <a-input v-decorator="['name', { rules:[{required: true, message: '菜单名称不能为空'},{max: 6, message: '菜单名称不能超过6个字'}]}]" />
          </a-form-item>
          <a-form-item label="排序">
            <a-input-number :min="0" v-decorator="['sort', { initialValue: 0, rules:[{required: true, message: '排序不能为空'}]}]" />
          </a-form-item>
          <a-form-item label="菜单类型">
            <a-radio-group v-decorator="['type', {initialValue: 'MENU', rules:[{required: true, message: '菜单类型为空'}]}]">
              <a-radio value="MENU">菜单</a-radio>
              <a-radio value="BUTTON">按钮</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="菜单图标">
            <a-row>
              <a-col :span="12">
                <a-input v-decorator="['icon', { rules:[{required: true, message: '菜单图标不能为空'}]}]" disabled />
              </a-col>
              <a-col :span="12">
                <a-button type="primary" shape="circle" icon="search" @click="showIconSelectModal" />
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item label="菜单权限">
            <a-input v-decorator="['permission', { rules:[]}]" />
          </a-form-item>
          <a-form-item label="路由地址">
            <a-input v-decorator="['path', { rules:[{required: true, message: '路由地址不能为空'}]}]" />
          </a-form-item>
          <a-form-item label="组件路径">
            <a-input v-decorator="['component', { rules:[{required: true, message: '组件路径不能为空'}]}]" />
          </a-form-item>
          <a-form-item label="菜单状态">
            <a-radio-group v-decorator="['keepAlive', {initialValue: 0, rules:[{required: true, message: '菜单状态不能为空'}]}]">
              <a-radio :value="0">开启</a-radio>
              <a-radio :value="1">关闭</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
    <a-modal
      title="选择图标"
      :visible="showIconSelectModalFlag"
      @cancel="changeIcon(true)"
      @ok="changeIcon(false)"
    >
      <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
        <icon-selector v-model="currentSelectedIcon" @change="handleIconChange"/>
      </a-card>
    </a-modal>
  </a-card>
</template>
<script>
  import { addMenu } from '@/api/menu';
  import { getMenuTreeList } from '@/api/manage';
  import ATreeSelect from 'ant-design-vue/es/tree-select';
  import IconSelector from '@/components/IconSelector';

  export default {
    name: 'MenuCreateModal',
    components: {
      ATreeSelect,
      IconSelector
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        mdl: {},
        form: this.$form.createForm(this, {}),
        treeData: [],
        currentSelectedIcon: 'pause-circle',
        showIconSelectModalFlag: false
      }
    },
    beforeCreate () {

    },
    created () {
    },
    watch: {
      value(value) {
        console.log(value);
      }
    },
    methods: {
      show (parentId) {
        getMenuTreeList().then(res => {
          this.treeData = res.data;
        })
        this.edit({ 'parentId': parentId, 'sort': 0 })
        this.visible = true
      },
      edit (record) {
        this.mdl = Object.assign({}, record)
      },
      close () {
        this.visible = false
        // 清空更新表单参数
        this.form.resetFields();
        this.$emit('close');
      },
      handleOk () {
        const _this = this
        // 触发表单验证
        _this.form.validateFields((err, values) => {
          // 验证表单没错误
          if (!err) {
            console.log('form values', values)

            _this.confirmLoading = true
            addMenu(values).then(res => {
              if (res) {
                _this.$message.success('保存成功');
                _this.$emit('ok');
              } else {
                _this.$message.warning('保存失败');
              }
            }).finally(() => {
              _this.confirmLoading = false;
              _this.close()
            });
          }
        })
      },
      handleCancel () {
        this.close()
      },
      handleIconChange (icon) {
        this.currentSelectedIcon = icon;
      },
      changeIcon (isCloseModal) {
        const { form: { setFieldsValue } } = this;
        if (!isCloseModal) {
          setFieldsValue({
            icon: this.currentSelectedIcon
          });
        } else {
          this.currentSelectedIcon = '';
        }
        this.showIconSelectModalFlag = false
      },
      showIconSelectModal() {
        this.showIconSelectModalFlag = true
      }

    }
  }
</script>
